<!--
 * @Author: 梁青春
 * @Date: 2025-02-20 15:37:24
 * @LastEditTime: 2025-02-21 17:01:11
 * @LastEditors: 梁青春
-->
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 时间和天气数据
const currentTime = ref('')
const weather = ref('星期五 -3°C')

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString()
}

// 返回基座应用
const backToMainApp = () => {
  // 增加环境检查
  if (window.__MICRO_APP_ENVIRONMENT__) {
    // 增加发送重试机制
    let retryCount = 0;
    const trySend = () => {
      try {
        // 子应用发送数据
        window.microApp.dispatch({
          path: '/',
          payload: {
            timestamp: new Date().toISOString(),
            retry: retryCount
          }
        })
      } catch (error) {
        if (retryCount < 3) {
          retryCount++;
          setTimeout(trySend, 500);
        } else {
          console.error('消息发送失败:', error);
        }
      }
    }
    trySend();
  } else {
    console.warn('非微前端环境，跳过消息发送');
  }
}


let timer

onMounted(() => {
  // 启动时间更新
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<template>
  <div class="header">
    <div class="left">
      <div class="time">{{ currentTime }}</div>
      <div class="weather">{{ weather }}</div>
    </div>
    <div class="title">取水监测管理一张图</div>
    <div class="right">
      <button class="system-btn" @click="backToMainApp">业务系统</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;
@use "sass:color";

.header {
  height: calc($header-height * var(--scale-ratio));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $padding-base;
  background-color: $bg-header;

  .left {
    display: flex;
    gap: $padding-base;

    .time,
    .weather {
      font-size: $font-size-lg;
    }
  }

  .title {
    font-size: $font-size-xxl;
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .system-btn {
    padding: calc($padding-xs * var(--scale-ratio)) calc($padding-sm * var(--scale-ratio));
    background-color: $bg-panel;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    color: $text-color;
    font-size: $font-size-lg;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background-color: color.scale($bg-panel, $lightness: 10%);
    }
  }
}
</style>